<template>
  <div class="login-home">
    <el-container class="home-content">
      <side-bar :collapse="isCollapse"></side-bar>
      <el-container class="home-container">
        <Header @isCollapse="(val) => {this.isCollapse = val}" />
        <div class="home-main">
          <div class="home-view boxSize">
            <router-view/>
          </div>
        </div>
        <Footer />
        <!-- <el-footer>Footer</el-footer> -->
      </el-container>
    </el-container>
  </div>
</template>

<script>
import Header from '@/components/Header.vue'
import SideBar from '@/components/SideBar.vue'
import Footer from '@/components/Footer.vue'
export default {
  components: { Header, SideBar, Footer },
  data () {
    return {
      isCollapse: false,
      lists: []
    }
  }
}
</script>

<style scoped lang = 'less'>
.login-home{
  width: 100%;
  height: 100%;
  .home-content{
    width: 100%;
    height: 100%;
    .el-menu-vertical-demo:not(.el-menu--collapse) {
      width: 200px;
      min-height: 400px;
    }
    .home-container{
      display: flex;
      flex-direction: column;
      .home-main{
        flex: 1;
        padding: 10px;
        height: 100%;
        overflow-y: auto;
        background: #f0f2f5;
        .home-view{
          padding: 10px;
          background: #fff;
          width: 100%;
          overflow-y: auto;
          /* font-size: 14px; */
        }
      }
    }
  }
}
</style>
